<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="Pinia 安装与配置">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
</script>

<script lang="ts">
  function getDoc() {
    return `

## 安装 pinia 模块
> 使用 npm 或熟悉的模块安装工具安装 pinia

\`\`\`
npm install pinia
\`\`\`

## 全局配置
> 应用入口文件 src/main.ts 中, 在创建 app 实例时，做全局绑定

\`\`\`
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)


// 1.引入 pinia 模块
import { createPinia } from 'pinia'

// 2.创建 pinia 实例
const pinia = createPinia()

// 3.使用pinia
app.use(pinia)

app.mount('#app')
\`\`\`
`;
  }
</script>
